<template>
  <el-popover
    :show-after="500"
    placement="left-start"
    title="热卖信息"
    width="40%"
    @show="open"
  >
    <template #reference>
      <div class="btn-style mb-[2px]">季节产品</div>
    </template>
    <div class="dialog-content">
      <el-table
        ref="tableRef"
        :data="tableData"
        border
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{
          color: '#333333',
          background: '#F6FAFF',
        }"
      >
        <el-table-column label="国家">
          <template #default="{ row }">
            <span>{{ getCountryName(row.country) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="热卖月份">
          <template #default="{ row }">
            <span>{{
              formatMonth(row.hot_sell_start_month, row.hot_sell_end_month)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="{ row }">
            <span>{{ row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-popover>
</template>
<script setup name="seasonalProduct">
import { ElMessage } from "element-plus";
import { getSKUSellMonth } from "./api.js";
import { formatMonth } from "@/utils/index.js";

const visible = ref(false);
const options = ref([]);

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { data } = toRefs(props);

const tableData = ref([]);

const open = () => {
  getDetails({ sku_ids: data.value.id });
  visible.value = true;
};

const getDetails = async (form) => {
  try {
    const res = await getSKUSellMonth(form);
    tableData.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

const getCountryName = (list) => {
  return list.map((item) => item.country_name).join("、");
};
const close = () => {
  visible.value = false;
};

defineExpose({ open });
</script>
